<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .asd{width: 100px;
            height: 100px;
            border: 2px solid #000;
            position: absolute;
            position: fixed;
            top: 10px;
            left: 10px;
        }
        .aas{
            width: 96px;
            height: 96px;
            background: red;
            border: 3px solid rgba(0,0,0,0);
            border-radius: 10px;
            position: fixed;
            top: 10px;
            left: 10px;
        }
        .aas1{
            width: 96px;
            height: 96px;
            background: red;
            border: 3px solid rgba(0,0,0,0);
            border-radius: 10px;
            position: fixed;
            top: 150px;
            left:680px;
        }
    </style>
</head>
<body>
    <div class="asd"></div>
    <div class="aas"></div>
    <div class="aas1"></div>
</body>
</html>
<script>
    const asd = document.querySelector('.asd')
    const aas = document.querySelector('.aas')
    const aas1 = document.querySelector('.aas1')
 
    
    // const top1 = getComputedStyle(aas1)
    // let flg = parseInt(top1.top)
    // let flg1 = parseInt(top1.left)
    let offsetX = 0;
    let offsetY = 0;
    function onmove(e) {
        const X = e.clientX - offsetX
        const Y = e.clientY - offsetY
        aas1.style.left = X + 'px'
        aas1.style.top = Y + 'px'
    }
    aas1.addEventListener('mousedown',(e) => {
        offsetX = e.offsetX
        offsetY = e.offsetY
        document.addEventListener('mousemove',onmove)
    })
    let locationTop = 0;
    let locationLeft = 0;

    const sttp = aas1.addEventListener('mouseup',(e) => {
        document.removeEventListener('mousemove',onmove)
        locationTop = getComputedStyle(aas1).top
        locationLeft = getComputedStyle(aas1).Left
        function move(){
            const as = getComputedStyle(aas);
    
            // let flag = parseInt(locationTop);
            // let fleg = parseInt(locationLeft);
            let flag = parseInt(as.top) //初始值
            let fleg = parseInt(as.left)//初始值
            // let flag = 0 //初始值
            // let fleg = 0
        
            const id = setInterval(() => {
    
                if(flag < locationTop){
                    flag += 5;
                }
                if(fleg < locationLeft){
                    fleg += 5;
                }
    
                asd.style.top = flag + 'px';
                asd.style.left = fleg + 'px';
                if(fleg === locationLeft){
                    clearInterval(id)
                }
            },16)
                          
        }
        
        document.addEventListener('keydown',(e) => {
            if(e.keyCode === 83){
                move()
            }
        })
    })
    

    
</script>